<template>
	<div class="home-container">
		<div class="chart-scrollbar" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
			<div class="chart-warp layout-view-bg-white" style="margin:0 0 10px 0">
				<div class="chart-warp-top">
						<ChartHead />
				</div>
			</div>
		</div>
		<el-row :gutter="15">
			<el-col :sm="6" class="mb15">
				<div class="home-card-item home-card-first">
					<div class="flex-margin flex">
						<img src="\@\assets\images\avatar.jpg" v-if = "getUserInfos.userName === 'admin_HR'">
						<img src="\@\assets\images\avatar1.jpg" v-if = "getUserInfos.userName === 'super_admin'">
						<img src="\@\assets\images\avatar2.jpg" v-if = "getUserInfos.userName === 'teamleader'">
						<img src="\@\assets\images\avatar3.jpg" v-if = "getUserInfos.userName === 'admin'">
						<img src="\@\assets\images\avatar4.jpg" v-if = "getUserInfos.userName === 'chairperson'">
						<img src="\@\assets\images\avatar5.jpg" v-if = "getUserInfos.userName === 'staff1'">

						<div class="home-card-first-right ml15">
							<div class="flex-margin">
								<div class="home-card-first-right-title">
									{{ currentTime }}，
									<span v-if="getUserInfos.userName === 'admin_HR'">小X</span>
									<span v-if="getUserInfos.userName === 'super_admin'">超级管理员</span>
									<span v-if="getUserInfos.userName === 'admin'">管理员</span>
									<span v-if="getUserInfos.userName === 'teamleader'">小Y</span>
									<span v-if="getUserInfos.userName === 'chairperson'">小M</span>
									<span v-if="getUserInfos.userName === 'staff1'">小N</span>
									<span v-if="getUserInfos.userName === ''">普通员工</span>
								</div>
								<div class="home-card-first-right-msg mt5">
									<span v-if="getUserInfos.userName === 'admin_HR'">人事部经理</span>
									<span v-if="getUserInfos.userName === 'super_admin'">超级管理员</span>
									<span v-if="getUserInfos.userName === 'admin'">管理员</span>
									<span v-if="getUserInfos.userName === 'teamleader'">项目经理</span>
									<span v-if="getUserInfos.userName === 'chairperson'">企业负责人</span>
									<span v-if="getUserInfos.userName === 'staff1'">1号员工</span>
									<span v-if="getUserInfos.userName === ''">普通员工</span>
									<span>--XX公司</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :sm="6" class="mb15" v-for="(v, k) in topCardItemList" :key="k">
				<div class="home-card-item home-card-item-box" :style="{ background: v.color }">
					<div class="home-card-item-flex">
						<div class="home-card-item-title pb3">{{ v.title }}</div>
						<div class="home-card-item-title-num pb6" :id="`titleNum${k + 1}`"></div>
					</div>
					<i :class="v.icon" :style="{ color: v.iconColor }"></i>
				</div>
			</el-col>
		</el-row>


		<el-row :gutter="15">
			<el-col :xs="24" :sm="24" :md="14" :lg="16" :xl="16" class="home-warning-media">
				<el-card shadow="hover" class="home-warning-card">
					<template #header>
						<div class="card-header">
							<span><i class='el-icon-postcard'></i> 待办事项</span>
							<span style="float: right;">
								<i class='el-icon-setting' style='font-size:20px'></i>
							</span>
						</div>
					</template>
					<div class="home-monitor">
						<div class="flex-warp">
							<div class="flex-warp-item" v-for="(v, k) in environmentList" :key="k">
								<div class="flex-warp-item-box">
									<i :class="v.icon" :style="{ color: v.iconColor }"></i>
									<div class="mt10">{{ v.value }}</div>
									<div class="pl5">{{ v.label }}</div>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="8">
				<el-card shadow="hover">
					<template #header>
						<div class="card-header">
							<span><i class='el-icon-chat-dot-round'></i> 通知</span>
							<span style="float: right;"><el-badge value="new" class="item"></el-badge></span>
						</div>
					</template>
					<div class="home-dynamic">
						<el-scrollbar>
							<div class="home-dynamic-item" v-for="(v, k) in activitiesList" :key="k">
								<div class="home-dynamic-item-left">
									<div class="home-dynamic-item-left-time1 mb5">{{ v.time1 }}</div>
									<div class="home-dynamic-item-left-time2">{{ v.time2 }}</div>
								</div>
								<div class="home-dynamic-item-line">
									<i class="iconfont icon-fangkuang"></i>
								</div>
								<div class="home-dynamic-item-right">
									<div class="home-dynamic-item-right-title mb5">
										<i class="el-icon-s-comment"></i>
										<span>{{ v.title }}</span>
									</div>
									<div class="home-dynamic-item-right-label">{{ v.label }}</div>
								</div>
							</div>
						</el-scrollbar>
					</div>
				</el-card>
			</el-col>
		</el-row>


		<el-row :gutter="15">
			<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" class="mb15">
				<el-card shadow="hover" style="margin:5px 0 0 0">
					<template #header>
						<div class="card-header">
							<span><i class='el-icon-user'></i> 人员构成</span>
							<span style="float: right;"><el-badge value="test" class="item"></el-badge></span>
						</div>
					</template>
					<div style="height: 200px" ref="homeLaboratoryRef"></div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
				<el-calendar v-model="data_value" style="margin:5px 0 0 0">
					<template #dateCell="{data}">
						<p :class="data.isSelected ? 'is-selected' : ''">
							{{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : '' }}
						</p>
					</template>
    		</el-calendar>
			</el-col>

			<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" class="home-dynamic-media">
				<el-card shadow="hover" style="margin:5px 0 0 0">
					<template #header>
						<div class="card-header">
							<span><i class='el-icon-thumb'></i> 便捷入口</span>
							<span style="float: right;">
								<i class='el-icon-setting' style='font-size:20px'></i>
							</span>
						</div>
					</template>
					<div class="home-monitor1">
						<div class="flex-warp">
							<div class="flex-warp-item" v-for="(v, k) in environmentList2" :key="k">
								<div class="flex-warp-item-box">
									<i class='' :class="v.icon" :style="{ color: v.iconColor }"></i>
									<div class="pl5 flex-warp-item-number">{{ v.label }}</div>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<el-row>
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt15">
				<el-card shadow="hover">
					<template #header>
						<div class="card-header">
							<span><i class='el-icon-first-aid-kit'></i> 每日健康报</span>
							<span style="float: right;">
								<el-badge value="非常重要hot" class="item"></el-badge>
							</span>
						</div>
					</template>
					<div style="height: 350px" ref="homeOvertimeRef"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance } from 'vue';
import * as echarts from 'echarts';
import { CountUp } from 'countup.js';
import { formatAxis } from '/@/utils/formatTime.ts';
import { topCardItemList, environmentList, environmentList2, activitiesList } from './mock.ts';
import { useStore } from '/@/store/index.ts';
import ChartHead from '/@/views/home/head.vue';
export default {
  name: 'home',
	components: { ChartHead },
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const store = useStore();
		const state = reactive({
			date_value: new Date(),
			topCardItemList,
			environmentList,
			environmentList2,
			activitiesList,

			tableData: {
				data: [
					{
						date: '2016-05-02',
						name: '1号实验室',
						address: '烟感2.1%OBS/M',
					},
					{
						date: '2016-05-04',
						name: '2号实验室',
						address: '温度30℃',
					},
					{
						date: '2016-05-01',
						name: '3号实验室',
						address: '湿度57%RH',
					},
				],
			},
		});
		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});
		// 当前时间提示语
		const currentTime = computed(() => {
			return formatAxis(new Date());
		});
		// 初始化数字滚动
		const initNumCountUp = () => {
			nextTick(() => {
				new CountUp('titleNum1', Math.random() * 1000).start();
				new CountUp('titleNum2', Math.random() * 100).start();
				new CountUp('titleNum3', Math.random() * 20).start();
				new CountUp('tipNum1', Math.random() * 1000).start();
				new CountUp('tipNum2', Math.random() * 1000).start();
				new CountUp('tipNum3', Math.random() * 1000).start();
			});
		};
		// 人员分析
		const initHomeLaboratory = () => {
			const myChart = echarts.init(proxy.$refs.homeLaboratoryRef);
			const option = {
						 title: {
						text: '人事部',
						subtext: '性别',
						left: 'center'
				},
				tooltip: {
						trigger: 'item'
				},
				legend: {
						orient: 'vertical',
						left: 'left',
				},
				series: [
						{
								name: '访问来源',
								type: 'pie',
								radius: '50%',
								data: [
										{value: 46, name: '女'},
										{value: 54, name: '男'},
								],
								emphasis: {
										itemStyle: {
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
										}
								}
						}
				]
			};
			myChart.setOption(option);
			window.addEventListener('resize', () => {
				myChart.resize();
			});
		};
		// 健康报
		const initHomeOvertime = () => {
			const myChart = echarts.init(proxy.$refs.homeOvertimeRef);
			const option = {
						tooltip: {
						trigger: 'axis',
						axisPointer: {
								type: 'cross',
								crossStyle: {
										color: '#999'
								}
						}
				},
				toolbox: {
						feature: {
								dataView: {show: true,title: '数据视图', readOnly: false},
								magicType: {show: true, type: ['line', 'bar']},
								restore: {show: true,title:"还原",},
								saveAsImage: {show: true,title:"保存为图片",}
						}
				},
				legend: {
						data: ['正常/人', '异常/人', '上报率/%']
				},
				xAxis: [
						{
								type: 'category',
								data: ['3-8', '3-9', '3-10', '3-11', '3-12', '3-13', '3-14', '3-15', '3-16', '3-17', '3-18', '3-19'],
								axisPointer: {
										type: 'shadow'
								}
						}
				],
				yAxis: [
						{
								type: 'value',
								name: '人数',
								min: 0,
								max: 500,
								interval: 50,
								axisLabel: {
										formatter: '{value} 人'
								}
						},
						{
								type: 'value',
								name: '上报率/%',
								min: 0,
								max: 100,
								interval: 10,
								axisLabel: {
										formatter: '{value} %'
								}
						}
				],
				series: [
						{
								name: '正常/人',
								type: 'bar',
								data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300]
						},
						{
								name: '异常/人',
								type: 'bar',
								data: [0,0,0,0,0,0,0,0,0,0,0,0]
						},
						{
								name: '上报率/%',
								type: 'line',
								yAxisIndex: 1,
								data: [100, 100,100,100, 100, 100,100, 100, 100, 100, 100, 100]
						}
				]
			};
			myChart.setOption(option);
			window.addEventListener('resize', () => {
				myChart.resize();
			});
		};
		// 页面加载时
		onMounted(() => {
			initNumCountUp();
			initHomeLaboratory();
			initHomeOvertime();
		});
		return {
			getUserInfos,
			currentTime,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss">
@import './chart.scss';
.home-container {
	overflow-x: hidden;
	.home-card-item {
		width: 100%;
		height: 103px;
		background: gray;
		border-radius: 4px;
		transition: all ease 0.3s;
		&:hover {
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			transition: all ease 0.3s;
		}
	}
	.home-card-item-box {
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		&:hover {
			i {
				right: 0px !important;
				bottom: 0px !important;
				transition: all ease 0.3s;
			}
		}
		i {
			position: absolute;
			right: -10px;
			bottom: -10px;
			font-size: 80px;
			transform: rotate(-30deg);
			transition: all ease 0.3s;
		}
		.home-card-item-flex {
			padding: 0 20px;
			color: white;
			.home-card-item-title,
			.home-card-item-tip {
				font-size: 20px;
			}
			.home-card-item-title-num {
				font-size: 25px;
			}
			.home-card-item-tip-num {
				font-size: 13px;
			}
		}
	}
	.home-card-first {
		background: white;
		border: 1px solid #ebeef5;
		display: flex;
		align-items: center;
		img {
			width: 70px;
			height: 70px;
			border-radius: 100%;
			border: 2px solid var(--color-primary-light-5);
		}
		.home-card-first-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			.home-card-first-right-msg {
				font-size: 13px;
				color: gray;
			}
		}
	}
	.home-monitor {
		height: 180px;
		.flex-warp-item {
			width: 25%;
			height: 180px;
			display: flex;
			.flex-warp-item-box {
				margin: auto;
				height: auto;
				text-align: center;
				.pl5{
					font-size: 15px;
					margin:15px;
					color: #666666;
				}
				.mt10{
					font-size: 25px;
					color: #333333;
				}
				i{
					font-size: 40px;
				}
			}
		}
	}
	.home-monitor1 {
		height: 200px;
		.flex-warp-item {
			width: 33%;
			height: 100px;
			display: flex;
			.flex-warp-item-box {
				margin: auto;
				height: auto;
				text-align: center;
				.pl5{
					font-size: 15px;
					margin:15px;
					color: #666666;
				}
				.mt10{
					font-size: 25px;
					color: #333333;
				}
				i{
					font-size: 40px;
				}
			}
		}
	}

	.home-warning-card {
		height: 292px;
		::v-deep(.el-card) {
			height: 100%;
		}
	}
	.home-dynamic {
		height: 180px;
		.home-dynamic-item {
			display: flex;
			width: 100%;
			height: 60px;
			overflow: hidden;
			&:first-of-type {
				.home-dynamic-item-line {
					i {
						color: orange !important;
					}
				}
			}
			.home-dynamic-item-left {
				text-align: right;
				.home-dynamic-item-left-time1 {
				}
				.home-dynamic-item-left-time2 {
					font-size: 13px;
					color: gray;
				}
			}
			.home-dynamic-item-line {
				height: 60px;
				border-right: 2px dashed #dfdfdf;
				margin: 0 20px;
				position: relative;
				i {
					color: var(--color-primary);
					font-size: 12px;
					position: absolute;
					top: 1px;
					left: -6px;
					transform: rotate(46deg);
					background: white;
				}
			}
			.home-dynamic-item-right {
				flex: 1;
				.home-dynamic-item-right-title {
					i {
						margin-right: 5px;
						border: 1px solid #dfdfdf;
						width: 20px;
						height: 20px;
						border-radius: 100%;
						padding: 3px 2px 2px;
						text-align: center;
						color: var(--color-primary);
					}
				}
				.home-dynamic-item-right-label {
					font-size: 13px;
					color: gray;
				}
			}
		}
	}
}

.is-selected {
    color: #1989FA;
		&:hover {
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			transition: all ease 0.3s;
		}
  }

.el-calendar{
	&:hover {
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			transition: all ease 0.3s;
		}
}

.el-calendar-table .el-calendar-day {
   height: 30px;
}
.el-calendar__body {
    padding: 5px 10px 10px;
}

.el-calendar-table thead th {
    padding: 8px 0;
    color: #606266;
    font-weight: 400;
}

.el-calendar__title{
	icon: 'el-icon-date';
}
</style>
